<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="个人资料" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="tui-personal">
			<view class="tui-personal-box">
				<!--<view class="tui-cell-header" v-for="(item, index) in list" :key="index">
					<view class="tui-cell-title">{{item.name}}:</view>
					<view class="tui-cell-sub">{{item.val}}</view>
				</view>-->
				<view class="tui-cell-header">
					<view class="tui-cell-title">用户名</view>
					<view class="tui-cell-sub">{{userInfo.username}}</view>
				</view>
				<view class="tui-cell-header">
					<view class="tui-cell-title">电话号码</view>
					<view class="tui-cell-sub">{{userInfo.phone}}</view>
				</view>
				<!--<view class="tui-cell-header">
					<view class="tui-cell-title">绑定微信号</view>
					<view class="tui-cell-sub">{{userInfo.wechatNo || '未绑定'}}</view>
				</view>
				<view class="tui-cell-header">
					<view class="tui-cell-title">邮箱</view>
					<view class="tui-cell-sub">{{userInfo.email || '未绑定'}}</view>
				</view>-->
				<view class="tui-cell-header">
					<view class="tui-cell-title">昵称</view>
					<view class="tui-cell-sub">{{userInfo.nickName}}</view>
				</view>
				<view class="tui-cell-header">
					<view class="tui-cell-title">是否实名认证</view>
					<view class="tui-cell-sub">{{userInfo.isReal == 1 ? '是' : '否'}}</view>
				</view>
			</view>
		</view>
		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
	import tuiListCell from "@/components/list-cell/list-cell"
    import { mapMutations, mapActions, mapState } from 'vuex'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'

	export default {
		name: 'personal',
		components: {
			tuiListCell, uniLoginModel
		},
		filters: {
		},
		data() {
			return {
				list: [
					{ name: '用户名', val: '用户jq2114'},
					{ name: '姓名', val: '张三'},
					{ name: '身份证', val: '450589425125474121'},
					{ name: '电话', val: '15112345678'}
				]
			}
		},
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
		methods: {
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-personal {
		padding-top: 30rpx;
		.tui-personal-box {
			background-color: #fff;
			.tui-cell-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border-top: 2rpx solid #eee;
				.tui-cell-title {
					font-size: 30rpx;
				}
				.tui-cell-sub {
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
